<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0" />
    <title>html5手机移动端转盘抽奖</title>
    <link rel="stylesheet" type="text/css" href="css/style.css" />
</head>
<body>
    <!--
    实现要求：
    1、有且仅有3次抽奖机会;
    2、开始抽奖，指针随机转5-10圈（每圈360deg，即转的度数为1800-3600之间任意数）;
    3、要求把抽奖次数记录下来，把页面关掉重新打开依然有效；
    -->
<div class="box">
   <div class="turnplate">
        <div class="prize"></div>
        <div class="pointer"></div>
    </div>
</div>
<p style="cursor: pointer; border: 1px solid black; width: 40px;">清除</p>
</body>
	<script type="text/javascript">
			var pointer = document.getElementsByClassName("pointer")[0];
			
			
			var p = document.getElementsByTagName("p")[0];
			p.onclick = function(){
				localStorage.clear(value);
			}
			
			
			
			
			var value = 1;
			//设定旋转条件
			pointer.onclick = function(){
					if(value >= 4){
						alert("最多3次机会！下次再来！")					
						
					}else{
						localStorage.setItem('key', value++);
						rotateFn();
					};
				};	
				
				;
			//指针旋转函数
			function rotateFn(){
				var a = 0;
				var i = Math.random()*(1 - 0.5) + 0.5;//取出指针旋转随机度数 i ；
				var timer = setInterval(function() {//定时器
					a += 20 * i;//每10毫秒增加20 * i （deg）；
					pointer.style.transform = "translate(-50%,-50%)"+ "rotate(" + a + "deg)";
					console.log("i=" + i);
				},10);	//每隔10毫秒执行一次
				
				//1800毫秒停止
				setTimeout(function (){
					clearInterval(timer); 
					//alert("3次机会，请继续~");
					//alert("旋转度" + a + "(deg)");
						var m = a%360;	
						if(18<=m && m<=54){
							alert("100M流量包");
						}else if(54<=m && m<=90){
							alert("2闪币");
						}else if(90<=m && m<=126){
							alert("50M流量包");
						}else if(126<=m && m<=162){
							alert("10闪币");
						}else if(162<=m && m<=198){
							alert("谢参与");
						}else if(198<=m && m<=234){
							alert("5闪币");
						}else if(234<=m && m<=270){
							alert("10M流量包");
						}else if(270<=m && m<=306){
							alert("20M流量包");
						}else if(306<=m && m<=342){
							alert("20闪币");
						}else if((342<m<360) && (0<m<18)){
							alert("30M流量包");
						};
						pointer.style.transform = "translate(-50%,-50%)"+ "rotate(" + 0 + "deg)";
				},1810);
				//共转1800毫秒，每隔10毫秒转一次，共转180次，每次自增量是20 * i ，i 是1.5~1里的随机一个数字；
				
				
				
			};
	</script>
</html>